<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <style>
        #app ul li {
            list-style: none;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"/>
    <button type="button" v-on:click="add()">添加</button>
    <br><br>
    <span>{{name}}</span>
    <ul>
        <li v-for="(value,key) in array">{{key+1}}:{{value}}</li>
    </ul>
    <ul>
        <li v-for="(value,index) in arr">{{index+1}}&nbsp;、&nbsp;{{value}}</li>
    </ul>
</div>
</body>
<script>
    let data = {
        name: '',
        array: ['dada', 'fghj', 'fghj'],
        arr: [
            {name: '兔子', age: 5000},
            {name: '虎', age: 300},
            {name: '熊', age: 400},
            {name: '鹰', age: 200}
        ]
    };

    let vm = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function () {
                vm.array.push(vm.name);
            }
        }
    });
</script>
</html>